<template>
  <div class="container">
    <!-- 顶部导航栏 -->
    <TopBar></TopBar>
    <!-- 发单 -->
    <div class="publish-page">
      <div class="main-title">发单内容编辑</div>
      <!-- 服务名称 -->
      <div class="form-group">
        <img src="../assets/images/must.png" alt="">
        <div class="title">服务名称：</div>
        <input type="text" v-model="serviceData.name" placeholder="请填写服务名称，发布后不可修改">
      </div>
      <!-- 服务类别 -->
      <div class="form-group">
        <img src="../assets/images/must.png" alt="">
        <div class="title">服务类别：</div>
        <select v-model="serviceData.category" style="width: 10.521vw">
          <option value="专业技能服务" v-show="PersonData.identity === 1" selected>专业技能服务</option>
          <option value="生活服务" v-show="PersonData.identity === 1">生活服务</option>
          <option value="商务合作服务" v-show="PersonData.identity === 1">商务合作服务</option>
          <option value="创意娱乐服务" v-show="PersonData.identity === 1">创意娱乐服务</option>
          <option value="其他服务" v-show="PersonData.identity === 1">其他服务</option>

          <option value="学习辅导" v-show="PersonData.identity === 0" selected>学习辅导</option>
          <option value="二手交易" v-show="PersonData.identity === 0">二手交易</option>
          <option value="校园跑腿服务" v-show="PersonData.identity === 0">校园跑腿服务</option>
          <option value="失物招领服务" v-show="PersonData.identity === 0">失物招领服务</option>
          <option value="拼车服务打印复印" v-show="PersonData.identity === 0">拼车服务打印复印</option>
          <option value="物品租赁" v-show="PersonData.identity === 0">物品租赁</option>
          <option value="摄影剪辑创意设计" v-show="PersonData.identity === 0">摄影剪辑创意设计</option>
          <option value="其他服务" v-show="PersonData.identity === 0">其他服务</option>
        </select>
      </div>
      <!-- 服务价格 -->
      <div class="form-group">
        <img src="../assets/images/must.png" alt="">
        <div class="title">服务价格：</div>
        <input type="text" v-model="serviceData.payment" placeholder="请输入金额" style="width: 5.625vw">
        <div style="width: 0.625vw;margin-left: 0.4167vw;margin-right: 0.4167vw;font-size: 1vw;
          font-weight: 500;color: rgba(32, 32, 32, 1);">/</div>
        <select v-model="serviceData.unit">
          <option value="次">次</option>
          <option value="小时">小时</option>
          <option value="天">天</option>
          <option value="月">月</option>
          <option value="年">年</option>
        </select>
        <input type="checkbox" v-model="serviceData.isPaymentNegotiable" style="width: 0.833vw;height: 1.481vw;
        margin-left: 1.667vw;margin-right: 0.4167vw;cursor:pointer;">
        <text style="left: 607px;font-size: 0.729vw;color: rgba(102, 102, 102, 1);">价格是否可议</text>
      </div>
      <!-- 截止时间 -->
      <div class="form-group">
        <div class="title">截止时间：</div>
        <input ref="datePickerRef" v-model=deadline0 placeholder="选择服务最晚完成时间，不选择则默认无截止时间">
      </div>
      <!-- 服务地点 -->
      <div class="form-group">
        <div class="title">服务地点：</div>
        <input type="text" v-model="region0" placeholder="选择服务进行城市，不选择则默认线上进行">
      </div>
      <!-- 需求描述 -->
      <div class="form-group" style="height: 22.22vh;width: 56.667vw;">
        <div class="title" style="height: 22.22vh;margin-top: 0.741vh;">
          <img src="../assets/images/must.png" alt="" style="position:relative;;top: 0.19vh">
          需求描述：
        </div>
        <textarea v-model="serviceData.description" placeholder="请输入您的具体要求，尽可能详细，以便更准确地匹配到适合您的服务提供者"
        style="width: 52.083vw;height: 22.22vh;"></textarea>
      </div>
      <!-- 组队安排 -->
      <div class="form-group">
        <div class="title">组队安排：</div>
        <input type="checkbox" v-model="serviceData.isGroup"
               style="width: 0.833vw;height: 1.481vw; margin-right: 0.4167vw; cursor:pointer;">
        <text style="left: 607px;font-size: 0.729vw;color: rgba(102, 102, 102, 1);">是否选择组队</text>
        <text style="left: 607px;margin-left: 1.667vw;font-size: 0.729vw;color: rgba(102, 102, 102, 1);">输入人数：</text>
        <input type="number" v-model="serviceData.peopleNumber" :placeholder="serviceData.isGroup ? '人数' : '1'"
               style="width: 2.7vw;margin-left: 0.417vw;"
               class="title-input"
               :disabled="!serviceData.isGroup">
      </div>
      <!-- 服务标签 -->
      <div class="form-group" style="margin-top: 0.737vh;margin-bottom: 3.7vh;height: 2.6vh;width: 56.667vw">
        <div class="title" style="height: 100%">服务标签：</div>
        <!-- 标签显示区域 -->
        <div class="tag-container">
          <div
              v-for="(tag, index) in serviceData.tags"
              :key="index"
              class="tag-item"
              @dblclick="editTag(index)"
          >
            {{ tag }}
            <img src="../assets/images/delete.png" @click="removeTag(index)" alt="">
          </div>
          <!-- 新建标签框 -->
          <div v-if="isEditing" class="tag-item" style="padding: 0">
            <input
                type="text"
                v-model="newTag"
                @keyup.enter="saveNewTag"
                @blur="saveNewTag"
                placeholder="输入标签"
                ref="newTagInput"
            />
          </div>
          <!-- “添加标签”按钮 -->
          <div class="add-tag" @click="startEditing" v-if="serviceData.tags.length < 4">
            添加标签
          </div>


        </div>
      </div>
      <!-- 图片上传 -->
      <div class="form-group" style="height: 4.167vw;width: 56.667vw;margin-bottom: 3.7vh;">
        <div class="title" style="height: 100%">图片上传：</div>
        <!-- 图片上传区域 -->
        <div class="image-container">
          <!-- 已上传的图片预览 -->
          <div
              v-for="(image, index) in serviceData.imgUrls"
              :key="index"
              class="image-item"
          >
            <img :src="image" class="per-image" alt="预览图片" style="width: 4.167vw;height: 4.167vw;">
            <img
                src="../assets/images/delete.png"
                alt="删除图片"
                class="delete-icon"
                @click="removeImage(index)"
            />
          </div>
          <!-- 添加图片按钮 -->
          <div class="add-image-btn">
            <img src="../assets/images/blankImage.png" alt="添加图片" style="width: 4.167vw;height: 4.167vw;">
            <input
                type="file"
                id="imageInput"
                @change="handleUploadTaskImage"
                accept="image/*"
                class="image-input"
            />
          </div>

        </div>
      </div>
      <!-- 上传文件 -->
      <div class="form-group" style="width: 29.948vw; height: 7.963vh;margin-bottom: 6vh">
        <div class="title" style="height: 100%">文件上传：</div>
        <div class="file-box" v-show="serviceData.attachmentUrl === ''">
          <img class="img1" src="../assets/images/fileImage.png" alt="">
          <div class="text1">上传文件，更清晰地介绍服务需求</div>
          <div class="text2">支持PDF、DOC、DOCX等格式</div>
          <button>
            <img src="../assets/images/arrow.png" alt="">
            上传文件
            <input
                class="file-input"
                id="upload-resume"
                type="file"
                accept="*.pdf *.doc"
                @change="handleUploadTaskFile"
            />
          </button>

        </div>
        <div class="file-box" v-show="serviceData.attachmentUrl !==''">
          <img class="img2" src="@/assets/images/pdfResumeImg.png" alt="">
          <a :href="serviceData.attachmentUrl" class="file-link">{{ serviceData.attachmentName }}</a>
          <img class="delete-btn" @click="deleteFile" src="../assets/images/delete.png" alt="">
        </div>
      </div>
      <!-- 按钮 -->
      <div class="btn-box">
        <button class="publish-btn" @click="handleTaskUpload()">立即发布</button>
        <button class="preview-btn">预览</button>
        <button class="save-btn">保存</button>
      </div>
    </div>

    <!-- 背景遮罩 -->
    <div v-if="goToMyTask" class="overlay"></div>
    <!-- 发布任务成功后 -->
    <div class="success-box" v-if="goToMyTask">
      <div class="title">
        <img src="../assets/images/delete.png" alt="" @click="goToMyTask = false">
      </div>
      <img class="success-img" src="../assets/images/publishSuccessImg.png" alt="">
      <div style="font-size: 1.21vw;font-weight: 700;margin-top: 2.5vh;margin-bottom:3vh;">任务发布成功</div>
      <div style="font-size: 0.9375vw;margin-bottom: 4.5vh;">是否立即跳转至服务记录页面</div>
      <div class="button-box">
        <button class="cancel-btn" @click="refreshPage">否</button>
        <button class="confirm-btn" @click="jumpConfirm">是</button>
      </div>
    </div>
  </div>

</template>

<script>
import {ref, nextTick, onMounted, watch, computed, watchEffect} from "vue";
import TopBar from "@/components/TopBar.vue";
// 引入日期插件
import flatpickr from "flatpickr";
import "flatpickr/dist/flatpickr.min.css"; // 引入基础样式
import { Mandarin } from "flatpickr/dist/l10n/zh"; // 引入中文语言包
import {useTaskFileUpload} from "@/api/uploadTaskFile";
import {useTaskImageUpload} from "@/api/uploadTaskImage";
import {useTaskInfoUpload} from "@/api/uploadTaskInfo";
import {useStore} from "vuex";
import {useRouter} from "vue-router";
export default {
  name: "MessagePage",
  components: {TopBar},

  setup() {
    const store = useStore(); // 获取 Vuex 实例
    const userInfo = computed(() => store.getters.getUserInfo); // 获取 Vuex 中的 userInfo
    // 本地数据，初始值为空，动态同步 Vuex 数据
    const PersonData = ref({
      name: "",          // 默认值为空字符串
      gender: "",        // 默认值为空字符串
      isNameShow: false, // 默认值为 false
      avatar: "",        // 默认值为空字符串
      identity: 0,       // 默认值为 0
      city: "",          // 默认值为空字符串
      birthdate: "",     // 默认值为空字符串
      school: "",        // 默认值为空字符串
      graduateYear: "",  // 默认值为空字符串
      vxNumber: "",      // 默认值为空字符串
      intro: "",         // 默认值为空字符串
      resume: "",        // 默认值为空字符串
      resumeName: "",
      ratio: 0,          // 默认值为 0
      phoneNumber: "" // 默认值为字符串类型的号码
    });
    // 动态同步 Vuex 的 userInfo 数据到 PersonData
    watchEffect(() => {
      PersonData.value = {
        ...PersonData.value, // 保留当前的本地数据
        name: userInfo.value?.name || "",
        gender: userInfo.value?.gender || "",
        avatar: userInfo.value?.avatar || "",
        identity: userInfo.value?.identity || 0,
        city: userInfo.value?.city || "",
        birthdate: userInfo.value?.birthdate || "",
        school: userInfo.value?.school || "",
        graduateYear: userInfo.value?.graduateYear || "",
        vxNumber: userInfo.value?.vxNumber || "",
        intro: userInfo.value?.intro || "",
        resume: userInfo.value?.resume || "",
        resumeName: userInfo.value?.resumeName || "",
        ratio: userInfo.value?.ratio || 0,
        phoneNumber: userInfo.value?.phoneNumber || "" // 使用 Vuex 数据或默认值
      };
    });
    const serviceData = ref({
      name: "",
      payment:null,
      unit:"天",
      isPaymentNegotiable: true,
      deadline:"",
      region:"线上",
      description:"",
      tags:[],
      imgUrls: [],
      attachmentUrl:"",
      isGroup:false,
      peopleNumber:1,
      category:PersonData.value.identity ? '专业技能服务':'学习辅导',
      attachmentName:"",
    });
    const deadline0 = ref("")
    watch(deadline0, (newDeadline) => {
      serviceData.value.deadline = newDeadline ? `${newDeadline}T00:00:00` : "";
    }, { immediate: true } ,);
    const region0 = ref("")
    watch(region0, (newRegion) => {
      if(newRegion === ''){
        serviceData.value.region = '线上';
      }
      else{
        serviceData.value.region = newRegion;
      }
    }, { immediate: true } ,
    );
    // 监听 isGroup 的变化
    watch(
        () => serviceData.value.isGroup,
        (newValue) => {
          serviceData.value.peopleNumber = newValue ? null : 1; // 动态设置人数
        },
        { immediate: true } ,// 确保初始化时执行
    );

    const goToMyTask = ref(false)
    const{handleUploadTaskFile, isLoading0} = useTaskFileUpload(serviceData)
    const{handleUploadTaskImage, isLoading} = useTaskImageUpload(serviceData)
    const{handleUploadTaskInfo, isLoading3} = useTaskInfoUpload(serviceData, goToMyTask)
    // 日期
    const datePickerRef = ref(null);
    // 定义更新日期的函数
    const updateDate = (selectedDates, dateStr) => {
      serviceData.value.deadline = dateStr; // 更新日期数据
    };
    // 初始化 flatpickr 日期选择器的函数
    const initializeFlatpickr = () => {
      flatpickr(datePickerRef.value, {
        locale: Mandarin, // 设置为中文
        dateFormat: "Y-m-d", // 日期格式
        onChange: updateDate, // 使用上面定义的 updateDate 函数
      });
    };
    // 使用 onMounted 钩子初始化 flatpickr
    onMounted(async () => {
      await nextTick();
      initializeFlatpickr();
    });

    // 标签
    const newTag = ref(""); // 新标签值
    const isEditing = ref(false); // 编辑模式
    const newTagInput = ref(null); // 输入框引用
    // 启动编辑模式
    const startEditing = () => {
      console.log("点击了添加标签按钮");
      isEditing.value = true;
      nextTick(() => {
        if (newTagInput.value) {
          newTagInput.value.focus();
        } else {
          console.warn("newTagInput is null");
        }
      });
    };
    // 保存新标签
    const saveNewTag = () => {
      const tag = newTag.value.trim();
      if (tag) {
        serviceData.value.tags.push(tag);
      }
      newTag.value = ""; // 清空输入框
      isEditing.value = false; // 退出编辑模式
    };
    // 删除标签
    const removeTag = (index) => {
      if (index >= 0 && index < serviceData.value.tags.length) {
        serviceData.value.tags.splice(index, 1);
      } else {
        console.warn("Invalid tag index");
      }
    };
    // 编辑标签
    const editTag = (index) => {
      if (index >= 0 && index < serviceData.value.tags.length) {
        newTag.value = serviceData.value.tags[index];
        isEditing.value = true; // 先切换编辑模式
        nextTick(() => {
          if (newTagInput.value) {
            newTagInput.value.focus();
          }
        });
        // 延后删除
        serviceData.value.tags.splice(index, 1);
      } else {
        console.warn("Invalid tag index");
      }
    };

    // 删除图片
    const removeImage = (index) => {
      serviceData.value.imgUrls.splice(index, 1);
    };
    // 删除简历
    const deleteFile = () => {
      if (window.confirm('确定要删除简历吗？')) {
        serviceData.value.attachmentUrl = '';
      }
    };

    const handleTaskUpload = () =>{
      handleUploadTaskInfo();
      /*goToMyTask.value = true*/
    }
    const router = useRouter();
    const refreshPage = () =>{
      window.location.reload();
    }
    const jumpConfirm = () => {
      goToMyTask.value = false
      router.push({
        name: "UserCenterPage",
        query: {
          activeTab: "service-record",
          serviceTab: "发单者",
        },
      });
    };
    return {
      PersonData,
      serviceData,
      datePickerRef,
      newTag,
      isEditing,
      newTagInput,
      startEditing,
      saveNewTag,
      editTag,
      removeTag,
      removeImage,
      handleUploadTaskFile,
      isLoading,
      isLoading0,
      deleteFile,
      handleUploadTaskImage,
      isLoading3,
      handleUploadTaskInfo,
      deadline0,
      goToMyTask,
      jumpConfirm,
      region0,
      handleTaskUpload,
      refreshPage
    };
  },
};
</script>


<style scoped>
.container {
  position: absolute;
  width: 100%;
  /*height: 127.62vh;*/
  height: 100vh;
  top: 0;
  left: 0;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: #F2F4F5;
}
.publish-page {
  position: absolute;
  left: 10.9375vw;
  top: 10.926vh;
  width: 78.125vw;
  height: 83.8vh;
  border-radius: 0.833vw;
  box-shadow: 0 0 0.521vw rgba(51, 51, 51, 0.15);
  background: #FFFFFF;
  display: flex;
  flex-direction: column;
  text-align: left;
  overflow-x: hidden;
  overflow-y: scroll;
}
.publish-page::-webkit-scrollbar {
  display: none; /* 隐藏滚动条 */
}
.main-title{
  margin-left: 1.667vw;
  margin-top: 3.241vh;
  margin-bottom: 3.33vh;
  font-size: 1.0417vw;
  font-weight: 700;
  color: rgba(32, 32, 32, 1);
}
.form-group{
  position: relative;
  margin-left: 1.667vw;
  margin-bottom: 2.963vh;
  width: 24.583vw;
  height: 3.704vh;
  display: flex;
  align-items: center;
}
.form-group img{
  margin: 0.74vh 0.417vw;
  width: 0.417vw;
  height: 0.74vh;
}
.form-group .title{
  width: fit-content;
  margin-right: 0.417vw;
  font-size: 0.833vw;
  font-weight: 500;
  color: rgba(32, 32, 32, 1);
  white-space: nowrap;
  display: flex;
  align-items: flex-start;
}
.form-group input{
  width: 19.58vw;
  height: 3.704vh;
  border-radius: 0.4167vw;
  border: 0.078125vw solid #D9D9D9;
  font-size: 0.729vw;
  color: #202020;
  padding-left: 0.5208vw;
  padding-right: 0.5208vw;
  box-sizing: border-box;
}
.form-group select{
  height: 3.704vh;
  width: 3.4375vw;
  border-radius: 0.4167vw;
  border: 0.078125vw solid #D9D9D9;
  font-size: 0.729vw;
  color: rgba(199, 199, 199, 1);
  color: #202020;
  padding-left: 0.25vw;
}
.form-group textarea{
  border-radius: 0.4167vw;
  border: 0.078125vw solid #D9D9D9;
  font-size: 0.729vw;
  color: #202020;
  padding: 0.5208vw;
  box-sizing: border-box;
  resize: none;
}
.tag-container {
  width: 52.083vw;
  height: 2.6vh;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.add-tag {
  width: 4.583vw;
  height: 2.6vh;
  line-height: 2.6vh;
  border-radius: 6.5625vw;
  border: 1px solid rgba(199, 199, 199, 1);
  cursor: pointer;
  font-size: 0.625vw;
  color: rgba(102, 102, 102, 1);
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.tag-item{
  position: relative;
  width: fit-content;
  height: 2.6vh;
  line-height: 2.6vh;
  background-size: 0.625vw 0.625vw;
  border: 1px solid rgba(153, 153, 153, 1);
  border-radius: 6.5625vw;
  margin-right: 1.25vw;
  padding-left: 1vw;
  padding-right: 0.2vw;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  font-size: 0.625vw;
  color: rgba(102, 102, 102, 1);
}
.tag-item input{
  width: 4.583vw;
  height: 2.6vh;
  line-height: 2.6vh;
  border-radius: 6.5625vw;
  border: none;
  cursor: pointer;
  font-size: 0.625vw;
  color: rgba(102, 102, 102, 1);
}
.tag-item input::placeholder{
  font-size: 0.625vw;
  color: rgba(102, 102, 102, 1);
  text-align: center;
  vertical-align: middle;
}
.tag-item img {
  width: 0.6vw;
  height: 0.6vw;
  margin-left: 0.4vw;
  cursor: pointer;
}

.image-container {
  width: 52.083vw;
  height: 4.167vw;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap:0 1.2vw;
}
.image-item {
  width: 4.167vw;
  height: 4.167vw;
  border-radius: 0.833vw;
  overflow: hidden;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.per-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  margin: 0;
  padding: 0;
  border: none;
}
.delete-icon {
  width: 1.6vw;
  height: 1.6vw;
  position: absolute;
  top: 0.005vw;
  right: 0.01vw;
  cursor: pointer;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  padding: 0.095vw;
  box-shadow: 0 0.2vw 0.5vw rgba(0, 0, 0, 0.2);
}
.add-image-btn {
  position: relative;
  width: 4.167vw;
  height: 4.167vw;
  border-radius: 0.833vw;
  cursor: pointer;
}
.add-image-btn .image-input{
  position: absolute;
  left: 0;
  top: 0;
  width: 4.167vw;
  height: 4.167vw;
  border-radius: 0.833vw;
  cursor: pointer;
  opacity: 0;
}
.add-image-btn img{
  position: relative;
  margin: 0;
}

.file-box{
  position: relative;
  width: 25.36vw;
  height: 7.963vh;
  border-radius: 0.6073vw;
  border: 0.078125vw solid #D9D9D9;
  display: flex;
  align-items: center;
}
.file-box .img1{
  position: absolute;
  left: 0.85vw;
  top: 1.315vh;
  width: 1.667vw;
  height: 1.667vw;
}
.file-box .text1{
  position: absolute;
  left: 4.167vw;
  top: 1.75vh;
  font-size: 0.729vw;
  color: rgba(153, 153, 153, 1);
}
.file-box .text2{
  position: absolute;
  left: 4.167vw;
  top: 4.6vh;
  font-size: 0.729vw;
  color: rgba(199, 199, 199, 1);
}
.file-box button{
  position: absolute;
  right: 1.25vw;
  top: 2.315vh;
  width: 7.5vw;
  height: 3.52vh;
  line-height: 3.52vh;
  border-radius: 14.1vw;
  background: rgba(238, 113, 62, 1);
  font-size: 0.833vw;
  border: none;
  color: rgba(255, 255, 255, 1);
  padding-left: 1.6vw;
  cursor: pointer;
}
.file-box button:hover{
  background-color: #ED843E;
}
.file-box button img{
  position: absolute;
  left: 0.98vw;
  top: 0.16vh;
  width: 0.78vw;
  height: 0.78vw;
}
.file-box button .file-input{
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 14.1vw;
  border: none;
  opacity: 0;
  cursor: pointer;
}
.file-box .img2{
  position: absolute;
  left: 0.9vw;
  top: 1.3vh;
  width: 3.9vh;
  height: 3.9vh;
}
.file-box .file-link{
  position: absolute;
  text-decoration: none;
  left: 4vw;
  width: 18.3vw;
  height: fit-content;
  line-height: 2.8vh;
  font-size: 0.9375vw;
  color: rgba(32, 32, 32, 1);
  cursor: pointer;
}
.file-box .delete-btn{
  position: absolute;
  width: 1.52vh;
  height: 1.52vh;
  top: 2.77vh;
  right: 1.04vw;
  cursor: pointer;
}
.btn-box{
  position: relative;
  margin-bottom: 5vh;
  right: 0;
  width: 100%;
  height: 4.4vh;
  display: flex;
  flex-direction: row-reverse;
}
.btn-box button {
  position: relative;
  width: 6.7187vw;
  height: 4.4vh;
  line-height: 3.8vh;
  border-radius: 0.4167vw;
  margin-right: 2.5vw;
  cursor: pointer;
}
.save-btn{
  background: #FFFFFF;
  border: 0.078125vw solid #EE713E;
  color: rgba(238, 113, 62, 1);
}
.preview-btn{
  background: #FFFFFF;
  border: 0.078125vw solid #EE713E;
  color: rgba(238, 113, 62, 1);
}
.publish-btn{
  background: #EE713E;
  border: 0.078125vw solid #EE713E;
  color: rgba(255, 255, 255, 1);
}
.publish-btn:hover {
  background-color: #ED843E;
  border: 0.078125vw solid #ED843E;
}
/* 任务发布成功弹窗 */
.success-box{
  position: absolute;
  left: 35.9375vw;
  top: 27.22vh;
  width: 28.125vw;
  height: 45.55vh;
  border-radius: 1.667vw;
  background: rgba(255, 255, 255, 1);
  padding-left: 1.875vw;
  padding-right: 2.083vw;
  z-index: 1000;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.success-box .title{
  position: relative;
  margin-top: 3.7vh;
  font-size: 1.0417vw;
  text-align: left;
  width: 100%;
  align-items: center;
  justify-content: center;
  margin-bottom: 3.2vh;
  font-weight: 550;
}
.success-box .title img{
  width: 2vh;
  float: right;
  cursor: pointer;
}
.success-img{
  height: 10.4vh;
}
.success-box .button-box{
  position: relative;
  width: 100%;
  height: 3.71vh;
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 0 3.34vw;
}
.success-box .cancel-btn{
  width: 6.25vw;
  height: 3.71vh;
  border-radius: 5.21vw;
  background: rgba(199, 199, 199, 1);
  border: none;
  font-size: 0.833vw;
  font-weight: 550;
  color: rgba(255, 255, 255, 1);
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
}
.success-box .confirm-btn{
  width: 6.25vw;
  height: 3.71vh;
  border-radius: 5.21vw;
  background: linear-gradient(221.64deg, rgba(238, 113, 62, 1) 0%, rgba(255, 140, 26, 1) 100%);
  border: none;
  font-size: 0.833vw;
  font-weight: 550;
  color: rgba(255, 255, 255, 1);
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
}
.overlay {
  position: fixed;
  top: 6.48vh;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(32, 32, 32, 0.5);
  z-index: 999; /* 保证遮罩层在最前 */
}


::placeholder{
  font-size: 0.729vw;
  color: rgba(199, 199, 199, 1);
  text-align: left;
  vertical-align: middle;
}
input:focus{
  outline: none;
}
/* 去除上下箭头 */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
}
/*input[type='number'] {
  -moz-appearance: textfield;
}*/
textarea:focus{
  outline: none;
}
select:focus{
  outline: none;
}
.title-input::placeholder{
  text-align: center;
}
</style>
